<template>
  <div class="add-card">
    <header class="add-header">
      <el-page-header content="增加月卡" @back="$router.back()" />
    </header>
    <main class="add-main">
      <div class="form-container">
        <div class="title">车辆信息</div>
        <div class="form">
          <el-form ref="hhh" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="车主姓名" prop="personName">
              <el-input v-model="form.personName" />
            </el-form-item>
            <el-form-item label="联系方式" prop="phoneNumber">
              <el-input v-model="form.phoneNumber" />
            </el-form-item>
            <el-form-item label="车辆号码" prop="carNumber">
              <el-input v-model="form.carNumber" />
            </el-form-item>
            <el-form-item label="车辆品牌" prop="carBrand">
              <el-input v-model="form.carBrand" />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="form-container">
        <div class="title">最新一次月卡缴费信息</div>
        <div class="form">
          <el-form label-width="100px">
            <el-form-item label="有效日期">
              <!-- <el-input /> -->
              <!-- 日期选择组件 -->
              <el-date-picker
                v-model="form2.cardDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item label="支付金额">
              <el-input v-model="form2.paymentAmount" />
            </el-form-item>
            <el-form-item label="支付方式">
              <!-- el-select下拉框整体组件 数据要和他双向绑定 -->
              <el-select v-model="form2.paymentMethod">
                <!-- <el-option
                  v-for="item in [{}]"
                  :key="item.industryCode"
                  :value="item.industryCode"
                  :label="item.industryName"
                /> -->
                <!-- el-option 表示一个选项 label=>描述文字 value=>将来收集提交给后端 -->
                <el-option label="支付宝" value="Alipay" />
                <el-option label="微信" value="WeChat" />
                <el-option label="现金" value="Cash" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>

    </main>
    <footer class="add-footer">
      <div class="btn-container">
        <el-button>重置</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </footer>
  </div>
</template>

<script>
import { addCarCardAPI, getCarCardDetail, editCarCard } from '@/api/car'
export default {
  data() {
    return {
      money: 0,
      // this.form
      // xxAPI(this.form)
      // 上面的表单form
      form: {
        // 不是乱写的 和后端接口文档保持一致!!!
        personName: '', // 车主名
        carNumber: '', // 车牌号
        phoneNumber: '', // 联系方式
        carBrand: '' // 车品牌
      },

      rules: {
        personName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ], // 车主名
        carNumber: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ], // 车牌号
        phoneNumber: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ], // 联系方式
        carBrand: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ] // 车品牌
      },

      // 下面的表单form
      form2: {
        cardDate: '', // 有效期 是个数组 而后端要的是两个数据 开始 结束
        paymentAmount: '', // 支付金额
        paymentMethod: '' // 支付方式
      }

    }
  },

  mounted() {
    console.log('页面加载了..')
    // 如何获取地址栏路径中的id参数
    // vuerouter插件提供的一个属性 $route
    const id = this.$route.query.id
    console.log(id) // 根据id请求后端接口 获取当前月卡id的详情数据

    if (id) {
      // 编辑 => 获取详情数据 显示到页面中(回显)
      getCarCardDetail(id).then((res) => {
        // 请求成功后触发 回调函数中还有一个参数就是后端的数据
        console.log(res)

        // 前端小白 => 秀操作
        // this.form = {
        //   ...res.data
        // }

        // this.form2 = {
        //   ...res.data
        // }

        // 回显数据 => 把后端响应回来的数据绑定回表单(双向绑定)
        this.form.personName = res.data.personName
        this.form.phoneNumber = res.data.phoneNumber
        this.form.carNumber = res.data.carNumber
        this.form.carBrand = res.data.carBrand

        this.form2.paymentAmount = res.data.paymentAmount
        this.form2.paymentMethod = res.data.paymentMethod

        // 添加两个字段 为了将来编辑使用
        this.form2.carInfoId = res.data.carInfoId
        this.form2.rechargeId = res.data.rechargeId
        // 给个数组
        this.form2.cardDate = [res.data.cardStartDate, res.data.cardEndDate]
      })
    }
  },

  methods: {
    submit() {
      // 将两个表单提交给后端(发请求)
      // 1. 封装一个请求添加的函数
      // 2. 校验

      // 上面表单整体校验
      this.$refs.hhh.validate((ok) => {
        if (ok) {
          // 表示校验通过 可以请求后端接口
          // console.log('请求啦')

          // request({})
          if (this.$route.query.id) {
            // 编辑
            console.log('编辑')
            // 发请求更新数据 => 提示 => 跳转回列表
            editCarCard({
              personName: this.form.personName,
              phoneNumber: this.form.phoneNumber,
              carNumber: this.form.carNumber,
              carBrand: this.form.carBrand,

              paymentMethod: this.form2.paymentMethod,
              paymentAmount: this.form2.paymentAmount,

              cardStartDate: this.form2.cardDate[0],
              cardEndDate: this.form2.cardDate[1],

              carInfoId: this.form2.carInfoId, // 月卡车辆id
              rechargeId: this.form2.rechargeId // 缴费信息id
            }).then(() => {
              this.$message.success('编辑成功')
              this.$router.push('/parking/card')
            })
          } else {
            // 添加
            addCarCardAPI({
              personName: this.form.personName,
              phoneNumber: this.form.phoneNumber,
              carNumber: this.form.carNumber,
              carBrand: this.form.carBrand,

              paymentAmount: this.form2.paymentAmount,
              paymentMethod: this.form2.paymentMethod,
              cardStartDate: this.form2.cardDate[0], // 开始日期
              cardEndDate: this.form2.cardDate[1] // 结束日子
            }).then(() => {
            // 请求成功后执行这个函数

              // 给提示
              this.$message.success('添加成功')
              // 跳转回列表页
              this.$router.push('/parking/card')
            }).catch((error) => {
            // 请求失败时执行的函数
            // console.dir(error) // 错误对象

              // 给个提示
              this.$message.error(error.response.data.msg)
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.add-card {
  background-color: #f4f6f8;
  height: 100vh;

  .add-header {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 64px;
    background-color: #fff;

    .left {
      span {
        margin-right: 4px;
      }
      .arrow{
        cursor: pointer;
      }
    }

    .right {
      text-align: right;
    }
  }

  .add-main {
    background: #f4f6f8;
    padding: 20px 130px;

    .form-container {
      background-color: #fff;

      .title {
        height: 60px;
        line-height: 60px;
        padding-left: 20px;
      }

      .form {
        margin-bottom: 20px;
        padding: 20px 65px 24px;

        .el-form {
          display: flex;
          flex-wrap: wrap;

          .el-form-item {
            width: 50%;
          }
        }
      }
    }
    .preview{
      img{
        width: 100px;
      }
    }
  }

  .add-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 24px 50px;
    color: #000000d9;
    font-size: 14px;
    background: #fff;
    text-align: center;
  }
}
</style>
